@hd: 1px; // 基本单位

.am-demo-page {
  .am-demo-hd {
    position: relative;
    overflow: hidden;
    .am-demo-title,
    .am-demo-subtitle {
      text-align: left;
      padding-left: 16 * @hd;
    }
    .am-demo-title {
      color: rgba(0, 0, 0, .75);
      font-size: 21 * @hd;
      font-weight: normal;
      margin: 27 * @hd 0 15 * @hd;
    }
    .am-demo-subtitle {
      font-size: 13 * @hd;
      color: rgba(0, 0, 0, .75);
      font-weight: normal;
      margin: 0 0 27 * @hd;
    }
  }
  .am-demo-bd {
    .am-list {
      margin: 0 16 * @hd 12 * @hd;
      background-color: white;
      border-radius: 2 * @hd;
      .am-list-header {
        padding: 0;
        padding-left: 24 * @hd;
        height: 70 * @hd;
        line-height: 70 * @hd;
        color: #404040;
        font-size: 16 * @hd;
      }
      .am-list-body {
        border-top: none;
        &::before {
          display: none;
        }
      }
      .am-list-item {
        padding-left: 24 * @hd;
        .am-list-content {
          color: #666;
          font-size: 14 * @hd;
        }
      }
      &.category-closed {
        .am-list-header {
          position: relative;
        }
        .am-list-body {
          display: none;
        }
      }
    }
  }
  .am-demo-category {
    display: flex;
    &-name {
      flex: 1;
    }
    &-arrow {
      width: 50 * @hd;
      text-align: center;
      transform: rotate(0deg);
      transition: transform 0.3s;
      span {
        margin-top: 5 * @hd;
        display: inline-block;
        color: #c7c7cc;
      }
    }
  }
}

.category-open .am-demo-category .am-demo-category-arrow {
  transform: rotate(-180deg);
}

.hide {
  display: none!important;
}

.show {
  display: block!important;
}

html,
body {
  font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", Helvetica, "Microsoft YaHei", Arial;
}

.nav-arrow-down {
  transform: scale(0.6);
}
